
import 'package:flutter/material.dart';
import 'package:test_flutter/common/style/common_style.dart';

/// 趋势
/// 2、头布局显示（超过自己的能力，攒不处理）
class TrendPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TrendPage();
  }
}

class _TrendPage extends State<TrendPage>{

  List<TrendBean> _data = List.empty(growable: true);

  @override
  void initState() {
    super.initState();
    _getData();
    print("size:${_data.length}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: ((BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              pinned: true,
              expandedHeight: 80,
              flexibleSpace: FlexibleSpaceBar(
                title: _rendHeadView(),
              ),
            )
          ];
        }),
        body: _rendBodyView(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print("点击跳转");
        },
        child: Icon(
          Icons.add,
          color: Colors.red,
          size: 40,
        ),
      ),
    );
    // return _readBodyView();
  }

  Future<void> _doRefresh() async {
    print("刷新开始...");
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _getData();
        print("刷新结束");
        return null;
      });
    });
  }

  _rendBodyView() {
    return RefreshIndicator(
      child: ListView.separated(
          physics: const AlwaysScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            var trendBean = _data[index];
            return Container(
              padding:
                  EdgeInsets.only(left: 10, top: 10, bottom: 10, right: 20),
              margin: EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5),
              child: InkWell(
                child: Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          flex: 1,
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              ClipOval(
                                child: Image.network(
                                  "${trendBean.avatarUrl}",
                                  width: 40,
                                  height: 40,
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(left: 10),
                                child: Flex(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  direction: Axis.vertical,
                                  children: [
                                    Text(
                                      "${trendBean.projectName}",
                                      style: TextStyle(
                                          fontSize: 15,
                                          color: Colors.black,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Flex(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      direction: Axis.horizontal,
                                      children: [
                                        Icon(
                                          Icons.supervisor_account,
                                          size: 14,
                                        ),
                                        Padding(
                                          padding: EdgeInsets.only(left: 4),
                                          child: Text(
                                            "${trendBean.factoryName}",
                                            style: TextStyle(
                                                color: Colors.black54),
                                          ),
                                        )
                                      ],
                                    )
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Text(
                          "${trendBean.language}",
                          style: TextStyle(fontSize: 14, color: Colors.black54),
                        )
                      ],
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 5, bottom: 10),
                      child: Text(
                        "${trendBean.describe}",
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(color: Colors.black54, fontSize: 14),
                      ),
                    ),
                    Row(
                      children: [
                        Expanded(
                          flex: 1,
                          child: Row(
                            children: [
                              Icon(
                                Icons.star_outline,
                                size: 14,
                              ),
                              Padding(
                                padding: EdgeInsets.only(left: 8),
                                child: Text("${trendBean.collectNum}"),
                              )
                            ],
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: Row(
                            children: [
                              Icon(Icons.share, size: 14),
                              Padding(
                                padding: EdgeInsets.only(left: 8),
                                child: Text("${trendBean.shareNum}"),
                              )
                            ],
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: Row(
                            children: [
                              Icon(Icons.warning_amber_outlined, size: 14),
                              Padding(
                                padding: EdgeInsets.only(left: 8),
                                child: Text("${trendBean.startsNum} stars ..."),
                              )
                            ],
                          ),
                        ),
                      ],
                    )
                  ],
                ),
                onTap: () {
                  print("onTap:$index");
                },
              ),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4.0),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black12,
                      offset: Offset(0.0, 4.0),
                      blurRadius: 10.0,
                      spreadRadius: 2.0,
                    )
                  ]),
            );
          },
          itemCount: _data.length,
          separatorBuilder: (context, index) {
            /// 添加分割线
            return Container(
              width: double.infinity,
              height: 2,
            );
          }),
      // ignore: missing_return
      onRefresh: () {
        return _doRefresh();
      },
    );
  }

  _rendHeadView() {
    return Container(
      width: double.infinity,
      height: 200,
      color: UIColors.common_color_red,
      child: Text('头布局'),
    );
    return Container(
      padding: EdgeInsets.all(10),
      color: UIColors.common_color_white1,
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: InkWell(
              onTap: () {
                print("点击今日");
              },
              child: Text('今日',
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.center),
            ),
          ),
          Container(
            width: 1,
            height: 5,
            color: Colors.white,
          ),
          Expanded(
            flex: 1,
            child: InkWell(
              onTap: (){
                print("点击全部");
              },
              child: Text('全部', style: TextStyle(color: Colors.white), textAlign: TextAlign.center,),
            ),
          )
        ],
      ),
    );
  }

  _getData() {
    var bean1 = new TrendBean();
    bean1.avatarUrl = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=509082044,717907742&fm=15&gp=0.jpg";
    bean1.nickname = "晓彤";
    bean1.language = "Ruby";
    bean1.projectName = "hetty";
    bean1.factoryName = "dstotijn";
    bean1.describe = "In recent years, with the growth of globalization, the post-80s and post-90s may face a strong impact on the existing world outlook: brexit and Trump's taking power have brought globalization back.";
    bean1.collectNum = 986;
    bean1.shareNum = 51;
    bean1.startsNum = 275;
    _data.add(bean1);

    var bean2 = new TrendBean();
    bean2.avatarUrl = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2575649012,964286929&fm=15&gp=0.jpg";
    bean2.nickname = "彤儿";
    bean2.language = "Go";
    bean2.projectName = "hacktoberfst-swag-list";
    bean2.factoryName = "crweiner";
    bean2.describe = "According to Roderick, who has studied globalization for a long time, the changes encountered by globalization today are not unpredictable reality.";
    bean2.collectNum = 1494;
    bean2.shareNum = 64;
    bean2.startsNum = 786;
    _data.add(bean2);

    var bean3 = new TrendBean();
    bean3.avatarUrl = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3432867398,3913710343&fm=15&gp=0.jpg";
    bean3.nickname = "哈哈";
    bean3.language = "ShaderLab";
    bean3.projectName = "open-project-1";
    bean3.factoryName = "UnityTechnologies";
    bean3.describe = "Globalization in the 100 years before 1914 was the first wave of globalization";
    bean3.collectNum = 722;
    bean3.shareNum = 379;
    bean3.startsNum = 366;
    _data.add(bean3);

    var bean4 = new TrendBean();
    bean4.avatarUrl = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3344700854,3918385133&fm=15&gp=0.jpg";
    bean4.nickname = "潇潇";
    bean4.language = "JavaScript";
    bean4.projectName = "Asabeneh";
    bean4.factoryName = "30-Days-Of-React";
    bean4.describe = "There are a lot of expensive and tasteless moon cakes";
    bean4.collectNum = 710;
    bean4.shareNum = 134;
    bean4.startsNum = 529;
    _data.add(bean4);

    var bean5 = new TrendBean();
    bean5.avatarUrl = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2861822476,1067001004&fm=15&gp=0.jpg";
    bean5.nickname = "大胸妹";
    bean5.language = "Python";
    bean5.projectName = "EssayKiller_V2";
    bean5.factoryName = "EssayKillerBrain";
    bean5.describe = "Study hard";
    bean5.collectNum = 341;
    bean5.shareNum = 51;
    bean5.startsNum = 208;
    _data.add(bean5);

    var bean6 = new TrendBean();
    bean6.avatarUrl = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3631534997,1587505976&fm=15&gp=0.jpg";
    bean6.nickname = "人间胸器";
    bean6.language = "Python";
    bean6.projectName = "rotate";
    bean6.factoryName = "rvizzz";
    bean6.describe = "What's so hard to understand";
    bean6.collectNum = 923;
    bean6.shareNum = 165;
    bean6.startsNum = 320;
    _data.add(bean6);
  }
}

class TrendBean{
  String avatarUrl = "";
  String nickname = "";
  String language = "";
  String projectName = "";
  String factoryName = "";
  String describe = "";
  int collectNum = 0;
  int shareNum = 0;
  int startsNum = 0;
}

class _NestedScrollView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final List<String> _tabs = ['Tab 1', 'Tab 2'];
    return DefaultTabController(length: _tabs.length,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  // title: const Text('title'),
                  pinned: true,
                  expandedHeight: 150,
                  bottom: TabBar(
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              )
            ];
          },
          body: TabBarView(
            children: _tabs.map((String name){
              return SafeArea(
                top: false,
                bottom: false,
                child: Builder(
                  builder: (BuildContext context){
                    return CustomScrollView(
                      key: PageStorageKey<String>(name),
                      slivers: <Widget>[
                        SliverOverlapInjector(
                          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                        ),
                        SliverPadding(
                          padding: const EdgeInsets.all(8.0),
                          sliver: SliverFixedExtentList(
                            itemExtent: 48.0,
                            delegate: SliverChildBuilderDelegate(
                                  (BuildContext context, int index) {
                                return ListTile(
                                  title: Text('Item $index'),
                                );
                              },
                              childCount: 30,
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              );
            }).toList(),
          ),
        ));
  }

}